import React, { useEffect, useState } from 'react';
import { Button, Table ,Switch ,notification,Pagination} from 'antd';
import { PlusOutlined ,DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table';
import _ from 'lodash'//lodash是一个常用工具函数集合库
import service from '../../../api'
import { useNavigate } from 'react-router-dom'
import './swiper.scss'

interface Props {}

interface DataType {
    key: string;
    alt: string;
    bannerid: string;
    flag: boolean;
    link: string;
    img: string
    }

function Swiper(props:Props) {

    var navigate = useNavigate()

    var [bannerlist,setBannerlist] = useState([])

    // 请求轮播图数据
    var request_banner_list = async () =>{
        var res = await service.banner.banner_list()
        console.log(res.data);
        if(res.data.code == 200) {
            setBannerlist(res.data.data)
        }
    }

    useEffect(()=>{
        request_banner_list()
    },[])

    // 更新flag状态
    var handleChange = async (checked:any,bannerid:any)=>{
        var res = await service.banner.banner_updateFlag({bannerid,flag:checked})    
        notification.destroy()
        if(res.data.code == 200) {
            notification.success({message:'更新flag成功'}) 
            var res = await service.banner.banner_list()
            setBannerlist(res.data.data)
        }
    }

    // 删除轮播图
    var handleDelete = async (bannerid:any)=>{
        var res = await service.banner.banner_delete({bannerid}) 
        notification.destroy()   
        if(res.data.code == 200) {
            notification.success({message:'删除轮播图成功'}) 
            //删除本地图片
            var index = bannerlist.findIndex((item:any)=>item.bannerid == bannerid)
            if( index != -1 ){
                //对本地数据深拷贝( 否则组件不会更新 )
                //var newbannerlist = JSON.parse( JSON.stringify( bannerlist ) )
                var newbannerlist = _.cloneDeep(bannerlist);
                newbannerlist.splice(index,1);
                setBannerlist( newbannerlist );
            }    
        }   
    }  
    
    // 跳转到添加轮播图界面
    var toSwiperAdd = ()=>{
        navigate('/index/swiperadd')
    }

    var toSwiperDel =async()=>{
        var res = await service.banner.banner_removeAll()
        notification.destroy()
        if(res.data.code == 200) {
            notification.success({message:'成功清空轮播图'}) 
            var res = await service.banner.banner_list()
            setBannerlist(res.data.data)
        }
    }

    // 表格列的配置项 
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            align: 'center',
            key: '1',
            render: (_,record,index) => <div>{ index+1 }</div>
        },
        {
            title: '图片 ',
            align: 'center',
            key: '2',
            width:200,
            render: (_,record,index) => <img src={record.img}/>
        },
        {
            title: '链接',
            align: 'center',
            key: '3',
            render: (_,record,index) => <Button type="link" href={record.link} danger>链接</Button>
        },
        {
            title: '提示',
            align: 'center',
            key: '4',
            dataIndex:'alt'
        },
        {
            title: '是否展示',
            align: 'center',
            key: 'name',
            render: (_,record,index) => <Switch checked={record.flag}  onChange={(checked)=>{ handleChange(checked,record.bannerid) }} />,
        },
        { 
            title: '操作',
            align: 'center',
            key: '6',
            render: (_,record,index) => <Button type="primary" danger onClick={()=>{handleDelete(record.bannerid)}}>Delete</Button>
        },
    ]
    
    return (
        <div className='swiper'>
            <Button type="primary" onClick={()=>{toSwiperAdd()}}>添加轮播图<PlusOutlined style={{fontSize:14 , color: '#fff'}}/></Button>
            <Button type="primary" onClick={()=>{toSwiperDel()}} style={{marginLeft:25}}>清空轮播图<DeleteOutlined style={{fontSize:14 , color: '#fff'}}/></Button>
            <Table className='table' columns={columns}  dataSource={bannerlist}/>
        </div>
    );
}

export default Swiper;